<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>业务架构关联分析系统 - 类继承图展示</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <style>
        :root {
            --primary-color: #2c3e50;
            --secondary-color: #3498db;
            --accent-color: #e74c3c;
            --light-color: #ecf0f1;
            --dark-color: #34495e;
            --success-color: #2ecc71;
            --warning-color: #f39c12;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background-color: #f5f7fa;
            color: var(--dark-color);
            line-height: 1.6;
        }
        
        .container {
            display: flex;
            min-height: 100vh;
        }
        
        /* 侧边栏样式 */
        .sidebar {
            width: 300px;
            background-color: var(--primary-color);
            color: white;
            padding: 20px;
            overflow-y: auto;
            box-shadow: 2px 0 5px rgba(0,0,0,0.1);
        }
        
        .sidebar h2 {
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(255,255,255,0.2);
        }
        
        .filter-section {
            margin-bottom: 25px;
        }
        
        .filter-section h3 {
            margin-bottom: 10px;
            font-size: 16px;
            color: var(--light-color);
        }
        
        .filter-options {
            background-color: rgba(255,255,255,0.1);
            border-radius: 5px;
            padding: 10px;
            max-height: 200px;
            overflow-y: auto;
        }
        
        .filter-option {
            padding: 8px 5px;
            cursor: pointer;
            border-bottom: 1px solid rgba(255,255,255,0.05);
            transition: background-color 0.2s;
        }
        
        .filter-option:hover {
            background-color: rgba(255,255,255,0.1);
        }
        
        .filter-option.selected {
            background-color: var(--secondary-color);
            font-weight: bold;
        }
        
        /* 主内容区样式 */
        .main-content {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
        }
        
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #ddd;
        }
        
        .header h1 {
            color: var(--primary-color);
        }
        
        .search-box {
            display: flex;
            gap: 10px;
        }
        
        .search-box input {
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            width: 250px;
        }
        
        .search-box button {
            padding: 8px 15px;
            background-color: var(--secondary-color);
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        
        .selected-filters {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 20px;
        }
        
        .filter-tag {
            background-color: var(--secondary-color);
            color: white;
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .filter-tag .remove {
            cursor: pointer;
            font-weight: bold;
        }
        
        .analysis-section {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            flex: 1;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        
        .section-header {
            background-color: var(--secondary-color);
            color: white;
            padding: 15px 20px;
            font-size: 18px;
            font-weight: bold;
        }
        
        .section-content {
            flex: 1;
            padding: 0;
            position: relative;
        }
        
        #graph-container {
            width: 100%;
            height: 100%;
            position: relative;
        }
        
        .no-selection {
            text-align: center;
            padding: 40px;
            color: #7f8c8d;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        
        .node-info {
            position: absolute;
            top: 20px;
            right: 20px;
            background-color: white;
            border-radius: 5px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            padding: 15px;
            max-width: 300px;
            z-index: 100;
            display: none;
        }
        
        .node-info h4 {
            margin-bottom: 10px;
            color: var(--primary-color);
        }
        
        .node-info p {
            margin-bottom: 8px;
            font-size: 14px;
        }
        
        .controls {
            position: absolute;
            bottom: 20px;
            left: 20px;
            display: flex;
            gap: 10px;
            z-index: 100;
        }
        
        .control-btn {
            background-color: white;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 8px 12px;
            cursor: pointer;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        
        .control-btn:hover {
            background-color: #f5f5f5;
        }
        
        .legend {
            position: absolute;
            top: 20px;
            left: 20px;
            background-color: white;
            border-radius: 5px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            padding: 15px;
            z-index: 100;
        }
        
        .legend h3 {
            margin-bottom: 10px;
            color: var(--primary-color);
        }
        
        .legend-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            padding-right: 5px;
        }
        
        .legend-toggle {
            font-size: 12px;
            transition: transform 0.2s;
        }
        
        .legend-item {
            display: flex;
            align-items: center;
            margin-bottom: 5px;
        }
        
        .legend-color {
            width: 15px;
            height: 15px;
            border-radius: 3px;
            margin-right: 8px;
        }
        
        @media (max-width: 768px) {
            .container {
                flex-direction: column;
            }
            
            .sidebar {
                width: 100%;
                max-height: 300px;
            }
        }
        
        /* 视图切换按钮样式 */
        .view-switcher {
            position: absolute;
            top: 20px;
            right: 340px;
            display: flex;
            background-color: white;
            border-radius: 4px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            z-index: 100;
        }
        
        .view-btn {
            padding: 8px 16px;
            border: none;
            background-color: transparent;
            cursor: pointer;
            font-size: 14px;
            color: var(--dark-color);
            transition: all 0.2s;
        }
        
        .view-btn.active {
            background-color: var(--secondary-color);
            color: white;
        }
        
        .view-btn:first-child {
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
        }
        
        .view-btn:last-child {
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
        }
        
        /* 表格容器样式 */
        #table-container {
            width: 100%;
            height: 100%;
            overflow: hidden;
            display: none;
        }
        
        .table-wrapper {
            height: calc(100% - 50px); /* 减去表头高度 */
            overflow-y: auto;
            padding: 20px;
        }
        
        /* 表格样式 */
        #relations-table {
            width: 100%;
            border-collapse: collapse;
            background-color: white;
        }
        
        #relations-table th,
        #relations-table td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        
        #relations-table th {
            background-color: var(--secondary-color);
            color: white;
            font-weight: bold;
            position: sticky;
            top: 0;
            z-index: 10;
            cursor: pointer;
            user-select: none;
        }
        
        #relations-table th:hover {
            background-color: #2980b9;
        }
        
        .sortable {
            position: relative;
        }
        
        .sort-indicator {
            margin-left: 5px;
            font-size: 12px;
        }
        
        .sort-indicator::after {
            content: '▼';
            opacity: 0.4;
        }
        
        .sort-asc .sort-indicator::after {
            content: '▲';
            opacity: 1;
        }
        
        .sort-desc .sort-indicator::after {
            content: '▼';
            opacity: 1;
        }
        
        #relations-table tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        
        #relations-table tr:hover {
            background-color: #f1f1f1;
        }
        
        #relations-table td {
            color: var(--dark-color);
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 侧边栏筛选区 -->
        <div class="sidebar">
            <h2>业务架构筛选器</h2>
            
            <div class="filter-section">
                <h3>业务领域</h3>
                <div class="filter-options" id="business-domains">
                    <div class="filter-option" data-value="demand-management">需求管理</div>
                    <div class="filter-option" data-value="development">开发管理</div>
                    <div class="filter-option" data-value="testing">测试管理</div>
                    <div class="filter-option" data-value="operations">运维管理</div>
                    <div class="filter-option" data-value="strategy">战略治理</div>
                </div>
            </div>
            
            <div class="filter-section">
                <h3>业务组件</h3>
                <div class="filter-options" id="business-components">
                    <div class="filter-option" data-value="demand-component">需求管理组件</div>
                    <div class="filter-option" data-value="design-component">应用设计组件</div>
                    <div class="filter-option" data-value="dev-component">开发环境管理组件</div>
                    <div class="filter-option" data-value="ci-component">持续集成组件</div>
                    <div class="filter-option" data-value="test-component">持续测试组件</div>
                </div>
            </div>
            
            <div class="filter-section">
                <h3>业务对象</h3>
                <div class="filter-options" id="business-objects">
                    <div class="filter-option" data-value="requirement">需求</div>
                    <div class="filter-option" data-value="user-story">用户故事</div>
                    <div class="filter-option" data-value="backlog">产品待办列表</div>
                    <div class="filter-option" data-value="test-case">测试用例</div>
                    <div class="filter-option" data-value="code-repo">代码仓库</div>
                </div>
            </div>
            
            <div class="filter-section">
                <h3>应用与系统</h3>
                <div class="filter-options" id="applications-systems">
                    <div class="filter-option" data-value="requirement-app">需求管理系统</div>
                    <div class="filter-option" data-value="devops-platform">DevOps平台</div>
                    <div class="filter-option" data-value="testing-platform">测试平台</div>
                    <div class="filter-option" data-value="monitoring-system">监控系统</div>
                </div>
            </div>
        </div>
        
        <!-- 主内容区 -->
        <div class="main-content">
            <div class="header">
                <h1>业务架构关联分析 - 类继承图展示</h1>
                <div class="search-box">
                    <input type="text" placeholder="搜索业务元素...">
                    <button>搜索</button>
                </div>
            </div>
            
            <div class="selected-filters" id="selected-filters">
                <!-- 选中的筛选标签会动态添加到这里 -->
            </div>
            
            <div class="analysis-section">
                <div class="section-header">关联分析图</div>
                <div class="section-content">
                    <div id="graph-container">
                        <!-- 关系图将在这里渲染 -->
                        <div class="no-selection" id="no-selection">
                            <h3>请从左侧选择业务领域、组件、对象或应用系统开始分析</h3>
                            <p>选择后，系统将以类继承图形式展示相关的业务组件、应用、系统及其组件之间的关系</p>
                        </div>
                    </div>
                    <div class="node-info" id="node-info">
                        <h4 id="node-title">节点标题</h4>
                        <p id="node-description">节点描述信息将在这里显示</p>
                        <p id="node-type">类型: </p>
                        <p id="node-relations">关联: </p>
                    </div>
                    <div class="controls">
                        <button class="control-btn" id="zoom-in">放大</button>
                        <button class="control-btn" id="zoom-out">缩小</button>
                        <button class="control-btn" id="reset-view">重置视图</button>
                        <button class="control-btn" id="expand-all">展开全部</button>
                        <button class="control-btn" id="collapse-all">折叠全部</button>
                    </div>
                    <!-- 图例 -->
                    <div class="legend">
                        <h3 class="legend-header">
                            图例
                            <span class="legend-toggle">▼</span>
                        </h3>
                        <div class="legend-item">
                            <div class="legend-color" style="background-color: #2196F3;"></div>
                            <span>业务元素</span>
                        </div>
                        <div class="legend-item">
                            <div class="legend-color" style="background-color: #4CAF50;"></div>
                            <span>价值流</span>
                        </div>
                        <div class="legend-item">
                            <div class="legend-color" style="background-color: #8BC34A;"></div>
                            <span>活动</span>
                        </div>
                        <div class="legend-item">
                            <div class="legend-color" style="background-color: #CDDC39;"></div>
                            <span>任务</span>
                        </div>
                        <div class="legend-item">
                            <div class="legend-color" style="background-color: #FFEB3B;"></div>
                            <span>步骤</span>
                        </div>
                        <div class="legend-item">
                            <div class="legend-color" style="background-color: #FF9800;"></div>
                            <span>业务组件</span>
                        </div>
                        <div class="legend-item">
                            <div class="legend-color" style="background-color: #FF5722;"></div>
                            <span>关联</span>
                        </div>
                        <div class="legend-item">
                            <div class="legend-color" style="background-color: #9C27B0;"></div>
                            <span>业务对象</span>
                        </div>
                        <div class="legend-item">
                            <div class="legend-color" style="background-color: #E91E63;"></div>
                            <span>业务实体</span>
                        </div>
                        <div class="legend-item">
                            <div class="legend-color" style="background-color: #3F51B5;"></div>
                            <span>应用</span>
                        </div>
                        <div class="legend-item">
                            <div class="legend-color" style="background-color: #009688;"></div>
                            <span>应用组件</span>
                        </div>
                        <div class="legend-item">
                            <div class="legend-color" style="background-color: #795548;"></div>
                            <span>系统</span>
                        </div>
                        <div class="legend-item">
                            <div class="legend-color" style="background-color: #607D8B;"></div>
                            <span>系统组件</span>
                        </div>
                        <div class="legend-item">
                            <div class="legend-color" style="background-color: #F44336;"></div>
                            <span>相关业务领域</span>
                        </div>
                        <div class="legend-item">
                            <div class="legend-color" style="background-color: #9E9E9E;"></div>
                            <span>相关业务组件</span>
                        </div>
                    </div>
                    <!-- 视图切换 -->
                    <div class="view-switcher">
                        <button class="view-btn active" id="graph-view-btn">图形视图</button>
                        <button class="view-btn" id="table-view-btn">表格视图</button>
                    </div>
                    
                    <!-- 表格容器 -->
                    <div id="table-container" style="display: none;">
                        <div class="section-header">关联关系表</div>
                        <div class="table-wrapper">
                            <table id="relations-table">
                                <thead>
                                    <tr>
                                        <th class="sortable" data-sort="sourceName">源节点 <span class="sort-indicator"></span></th>
                                        <th class="sortable" data-sort="sourceType">源节点类型 <span class="sort-indicator"></span></th>
                                        <th class="sortable" data-sort="relationType">关系类型 <span class="sort-indicator"></span></th>
                                        <th class="sortable" data-sort="targetName">目标节点 <span class="sort-indicator"></span></th>
                                        <th class="sortable" data-sort="targetType">目标节点类型 <span class="sort-indicator"></span></th>
                                    </tr>
                                </thead>
                                <tbody id="relations-table-body">
                                    <!-- 表格内容将动态生成 -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            

        </div>
    </div>

    <script>
        // 模拟数据 - 实际应用中这些数据可能来自API
        const mockData = {
            // 需求管理领域的数据
            "demand-management": {
                name: "需求管理",
                type: "业务领域",
                description: "负责从业务需求到产品需求的转化和管理过程",
                valueStreams: [
                    {
                        name: "需求获取与分析价值流",
                        type: "价值流",
                        description: "负责从客户和市场获取需求并进行分析的完整流程",
                        activities: [
                            {
                                name: "需求收集活动",
                                type: "活动",
                                description: "从各种渠道收集用户需求",
                                tasks: [
                                    {
                                        name: "用户访谈任务",
                                        type: "任务",
                                        description: "与用户进行深入访谈以了解需求",
                                        steps: [
                                            {
                                                name: "制定访谈计划",
                                                type: "步骤",
                                                description: "确定访谈目标、对象和问题清单"
                                            },
                                            {
                                                name: "执行用户访谈",
                                                type: "步骤",
                                                description: "按照计划与用户进行面对面或远程访谈"
                                            },
                                            {
                                                name: "整理访谈记录",
                                                type: "步骤",
                                                description: "将访谈内容整理成结构化的需求文档"
                                            }
                                        ]
                                    },
                                    {
                                        name: "市场调研任务",
                                        type: "任务",
                                        description: "分析市场趋势和竞争对手产品",
                                        steps: [
                                            {
                                                name: "确定调研范围",
                                                type: "步骤",
                                                description: "明确市场调研的目标和范围"
                                            },
                                            {
                                                name: "收集市场数据",
                                                type: "步骤",
                                                description: "收集市场报告、竞争对手信息等数据"
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                name: "需求分析活动",
                                type: "活动",
                                description: "对收集到的需求进行深入分析和细化",
                                tasks: [
                                    {
                                        name: "需求分类任务",
                                        type: "任务",
                                        description: "将收集到的需求按照不同维度进行分类",
                                        steps: [
                                            {
                                                name: "制定分类标准",
                                                type: "步骤",
                                                description: "确定需求分类的标准和方法"
                                            },
                                            {
                                                name: "执行需求分类",
                                                type: "步骤",
                                                description: "按照标准对需求进行分类标记"
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        name: "需求实现与验证价值流",
                        type: "价值流",
                        description: "负责将需求转化为产品功能并进行验证的流程",
                        activities: [
                            {
                                name: "需求实现活动",
                                type: "活动",
                                description: "将需求转化为实际的产品功能",
                                tasks: [
                                    {
                                        name: "功能设计任务",
                                        type: "任务",
                                        description: "根据需求设计产品功能",
                                        steps: [
                                            {
                                                name: "制定功能规格书",
                                                type: "步骤",
                                                description: "详细描述功能的需求和规格"
                                            },
                                            {
                                                name: "进行原型设计",
                                                type: "步骤",
                                                description: "创建功能的原型和流程图"
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    }
                ],
                components: [
                    {
                        name: "需求管理组件",
                        type: "业务组件",
                        description: "负责需求的收集、分析、评审和优先级排序",
                        relatedTasks: ["用户访谈任务", "市场调研任务", "需求分类任务"],
                        businessObjects: [
                            {
                                name: "需求",
                                type: "业务对象",
                                description: "描述用户需要的功能或服务",
                                businessEntities: [
                                    {
                                        name: "功能需求",
                                        type: "业务实体",
                                        description: "描述产品需要实现的功能"
                                    },
                                    {
                                        name: "非功能需求",
                                        type: "业务实体",
                                        description: "描述产品的性能、安全等特性"
                                    }
                                ]
                            },
                            {
                                name: "用户故事",
                                type: "业务对象",
                                description: "从用户视角描述需求的简短叙述",
                                businessEntities: [
                                    {
                                        name: "用户场景",
                                        type: "业务实体",
                                        description: "描述用户如何使用产品"
                                    },
                                    {
                                        name: "验收标准",
                                        type: "业务实体",
                                        description: "描述需求完成的判断标准"
                                    },
                                    {
                                        name: "优先级",
                                        type: "业务实体",
                                        description: "描述需求的重要程度"
                                    }
                                ]
                            },
                            {
                                name: "产品待办列表",
                                type: "业务对象",
                                description: "存储和管理待实现的产品需求",
                                businessEntities: [
                                    {
                                        name: "待办项",
                                        type: "业务实体",
                                        description: "待办列表中的单个项目"
                                    },
                                    {
                                        name: "迭代计划",
                                        type: "业务实体",
                                        description: "规划每个迭代要实现的需求"
                                    }
                                ]
                            }
                        ],
                        applications: [
                            {
                                name: "需求管理系统",
                                type: "应用",
                                description: "用于管理产品需求的软件系统",
                                components: [
                                    {
                                        name: "需求收集模块",
                                        type: "应用组件",
                                        description: "负责从各种渠道收集需求",
                                        systems: [
                                            {
                                                name: "用户反馈系统",
                                                type: "系统",
                                                description: "收集和处理用户反馈的系统",
                                                components: [
                                                    {
                                                        name: "反馈收集引擎",
                                                        type: "系统组件",
                                                        description: "负责从各种渠道收集用户反馈"
                                                    },
                                                    {
                                                        name: "反馈分析模块",
                                                        type: "系统组件",
                                                        description: "对收集到的反馈进行分析和分类"
                                                    }
                                                ]
                                            }
                                        ]
                                    },
                                    {
                                        name: "需求分析模块",
                                        type: "应用组件",
                                        description: "负责需求的分析和细化",
                                        systems: [
                                            {
                                                name: "数据分析系统",
                                                type: "系统",
                                                description: "对需求数据进行深度分析的系统",
                                                components: [
                                                    {
                                                        name: "数据挖掘引擎",
                                                        type: "系统组件",
                                                        description: "从需求数据中挖掘有价值的信息"
                                                    },
                                                    {
                                                        name: "模式识别模块",
                                                        type: "系统组件",
                                                        description: "识别需求中的模式和趋势"
                                                    }
                                                ]
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    }
                ]
            },
            // 开发管理领域的数据
            "development": {
                name: "开发管理",
                type: "业务领域",
                description: "负责软件产品的设计、编码和构建过程",
                components: [
                    {
                        name: "开发环境管理组件",
                        type: "业务组件",
                        description: "负责开发环境的配置和管理",
                        applications: [
                            {
                                name: "开发环境平台",
                                type: "应用",
                                description: "为开发人员提供统一的开发环境",
                                components: [
                                    {
                                        name: "环境配置模块",
                                        type: "应用组件",
                                        description: "负责开发环境的自动化配置",
                                        systems: [
                                            {
                                                name: "配置管理系统",
                                                type: "系统",
                                                description: "管理开发环境配置的系统",
                                                components: [
                                                    {
                                                        name: "配置模板库",
                                                        type: "系统组件",
                                                        description: "存储和管理环境配置模板"
                                                    },
                                                    {
                                                        name: "配置分发引擎",
                                                        type: "系统组件",
                                                        description: "将配置分发到各个开发环境"
                                                    }
                                                ]
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        name: "持续集成组件",
                        type: "业务组件",
                        description: "负责自动化构建、测试和集成过程",
                        applications: [
                            {
                                name: "CI/CD平台",
                                type: "应用",
                                description: "持续集成和持续部署平台",
                                components: [
                                    {
                                        name: "构建引擎",
                                        type: "应用组件",
                                        description: "负责代码的自动化构建",
                                        systems: [
                                            {
                                                name: "构建系统",
                                                type: "系统",
                                                description: "执行代码构建的系统",
                                                components: [
                                                    {
                                                        name: "编译引擎",
                                                        type: "系统组件",
                                                        description: "负责源代码的编译"
                                                    },
                                                    {
                                                        name: "依赖管理模块",
                                                        type: "系统组件",
                                                        description: "管理项目依赖关系"
                                                    }
                                                ]
                                            }
                                        ]
                                    },
                                    {
                                        name: "测试执行模块",
                                        type: "应用组件",
                                        description: "负责自动化测试的执行",
                                        systems: [
                                            {
                                                name: "测试执行系统",
                                                type: "系统",
                                                description: "执行自动化测试的系统",
                                                components: [
                                                    {
                                                        name: "测试调度器",
                                                        type: "系统组件",
                                                        description: "调度和管理测试任务"
                                                    },
                                                    {
                                                        name: "测试执行引擎",
                                                        type: "系统组件",
                                                        description: "执行具体的测试用例"
                                                    }
                                                ]
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    }
                ]
            },
            // 需求管理系统数据
            "requirement-app": {
                name: "需求管理系统",
                type: "应用",
                description: "用于管理产品需求的软件系统",
                components: [
                    {
                        name: "需求收集模块",
                        type: "应用组件",
                        description: "负责从各种渠道收集需求"
                    },
                    {
                        name: "需求分析模块",
                        type: "应用组件",
                        description: "负责需求的分析和细化"
                    },
                    {
                        name: "需求评审模块",
                        type: "应用组件",
                        description: "支持需求的评审和确认过程"
                    }
                ],
                relatedDomains: ["需求管理"],
                relatedComponents: ["需求管理组件"]
            }
        };

        // 全局变量
        let selectedData = null;
        let svg, g, zoom, simulation;
        let nodes = [], links = [];
        let nodeElements, linkElements;

        // 初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 为所有筛选选项添加点击事件
            const filterOptions = document.querySelectorAll('.filter-option');
            filterOptions.forEach(option => {
                option.addEventListener('click', function() {
                    // 切换选中状态
                    this.classList.toggle('selected');
                    
                    // 更新选中的筛选标签
                    updateSelectedFilters();
                    
                    // 更新关系图内容
                    updateGraphContent();
                });
            });

            // 为控制按钮添加事件
            document.getElementById('zoom-in').addEventListener('click', function() {
                zoom.scaleBy(svg.transition().duration(750), 1.3);
            });
            
            document.getElementById('zoom-out').addEventListener('click', function() {
                zoom.scaleBy(svg.transition().duration(750), 0.7);
            });
            
            document.getElementById('reset-view').addEventListener('click', function() {
                svg.transition().duration(750).call(
                    zoom.transform,
                    d3.zoomIdentity,
                    d3.zoomTransform(svg.node()).invert([width / 2, height / 2])
                );
            });
            
            document.getElementById('expand-all').addEventListener('click', function() {
                // 展开所有节点的实现
            });
            
            document.getElementById('collapse-all').addEventListener('click', function() {
                // 折叠所有节点的实现
            });

            // 视图切换按钮事件
            document.getElementById('graph-view-btn').addEventListener('click', function() {
                document.getElementById('graph-view-btn').classList.add('active');
                document.getElementById('table-view-btn').classList.remove('active');
                document.getElementById('graph-container').style.display = 'block';
                document.getElementById('table-container').style.display = 'none';
            });
            
            document.getElementById('table-view-btn').addEventListener('click', function() {
                document.getElementById('table-view-btn').classList.add('active');
                document.getElementById('graph-view-btn').classList.remove('active');
                document.getElementById('graph-container').style.display = 'none';
                document.getElementById('table-container').style.display = 'block';
            });

            // 初始化关系图容器
            initGraph();
        });

        // 初始化关系图
        function initGraph() {
            const container = document.getElementById('graph-container');
            const width = container.clientWidth;
            const height = container.clientHeight;

            // 移除现有的SVG
            d3.select("#graph-container svg").remove();

            // 创建SVG
            svg = d3.select("#graph-container")
                .append("svg")
                .attr("width", width)
                .attr("height", height);

            g = svg.append("g");

            // 定义缩放行为
            zoom = d3.zoom()
                .scaleExtent([0.1, 4])
                .on("zoom", (event) => {
                    g.attr("transform", event.transform);
                });

            svg.call(zoom);

            // 初始居中视图
            svg.call(zoom.transform, d3.zoomIdentity.translate(width / 2, height / 2));
        }

        // 更新选中的筛选标签
        function updateSelectedFilters() {
            const selectedFiltersContainer = document.getElementById('selected-filters');
            selectedFiltersContainer.innerHTML = '';

            const selectedOptions = document.querySelectorAll('.filter-option.selected');

            selectedOptions.forEach(option => {
                const filterTag = document.createElement('div');
                filterTag.className = 'filter-tag';
                
                // 获取筛选类别
                const parentId = option.parentElement.id;
                let category = '';
                
                if (parentId === 'business-domains') category = '业务领域';
                else if (parentId === 'business-components') category = '业务组件';
                else if (parentId === 'business-objects') category = '业务对象';
                else if (parentId === 'applications-systems') category = '应用与系统';
                
                filterTag.innerHTML = `
                    ${category}: ${option.textContent}
                    <span class="remove" data-value="${option.dataset.value}">×</span>
                `;
                
                selectedFiltersContainer.appendChild(filterTag);
            });

            // 为移除按钮添加事件
            document.querySelectorAll('.filter-tag .remove').forEach(removeBtn => {
                removeBtn.addEventListener('click', function() {
                    const value = this.dataset.value;
                    const optionToDeselect = document.querySelector(`.filter-option[data-value="${value}"]`);
                    if (optionToDeselect) {
                        optionToDeselect.classList.remove('selected');
                    }
                    
                    updateSelectedFilters();
                    updateGraphContent();
                });
            });
        }

        // 更新关系图内容
        function updateGraphContent() {
            const selectedOptions = document.querySelectorAll('.filter-option.selected');

            if (selectedOptions.length === 0) {
                document.getElementById('no-selection').style.display = 'flex';
                d3.select("#graph-container svg").style("display", "none");
                return;
            }

            // 隐藏"无选择"提示，显示关系图
            document.getElementById('no-selection').style.display = 'none';
            d3.select("#graph-container svg").style("display", "block");

            // 获取第一个选中的选项作为主要分析对象
            const primarySelection = selectedOptions[0];
            const value = primarySelection.dataset.value;

            // 检查是否有对应的模拟数据
            if (mockData[value]) {
                selectedData = mockData[value];
                // 构建关系图数据
                const graphData = buildGraphData(selectedData, value);
                // 渲染关系图
                renderGraph(graphData);
                
                // 渲染关系表格
                renderRelationsTable(graphData);
            } else {
                // 如果没有对应数据，显示默认内容
                selectedData = {
                    name: primarySelection.textContent,
                    type: "未知类型",
                    description: "暂无相关数据"
                };
                const graphData = buildGraphData(selectedData, value);
                renderGraph(graphData);
            }
        }

        // 构建关系图数据
        function buildGraphData(data, id) {
            nodes = [];
            links = [];
            let nodeId = 0;
            
            // 创建根节点
            const rootNode = {
                id: nodeId++,
                name: data.name,
                type: data.type || "业务元素",
                description: data.description || "",
                x: 400,
                y: 300
            };
            nodes.push(rootNode);
            
            // 添加价值流
            if (data.valueStreams) {
                data.valueStreams.forEach((valueStream, index) => {
                    const valueStreamNode = {
                        id: nodeId++,
                        name: valueStream.name,
                        type: valueStream.type || "价值流",
                        description: valueStream.description || "",
                        x: 200 + index * 250,
                        y: 150
                    };
                    nodes.push(valueStreamNode);
                    
                    // 添加根节点到价值流的链接
                    links.push({
                        source: rootNode.id,
                        target: valueStreamNode.id,
                        type: "包含"
                    });
                    
                    // 添加活动
                    if (valueStream.activities) {
                        valueStream.activities.forEach((activity, activityIndex) => {
                            const activityNode = {
                                id: nodeId++,
                                name: activity.name,
                                type: activity.type || "活动",
                                description: activity.description || "",
                                x: 100 + activityIndex * 200,
                                y: 50
                            };
                            nodes.push(activityNode);
                            
                            // 添加价值流到活动的链接
                            links.push({
                                source: valueStreamNode.id,
                                target: activityNode.id,
                                type: "包含"
                            });
                            
                            // 添加任务
                            if (activity.tasks) {
                                activity.tasks.forEach((task, taskIndex) => {
                                    const taskNode = {
                                        id: nodeId++,
                                        name: task.name,
                                        type: task.type || "任务",
                                        description: task.description || "",
                                        x: 50 + taskIndex * 180,
                                        y: -50
                                    };
                                    nodes.push(taskNode);
                                    
                                    // 添加活动到任务的链接
                                    links.push({
                                        source: activityNode.id,
                                        target: taskNode.id,
                                        type: "包含"
                                    });
                                    
                                    // 添加步骤
                                    if (task.steps) {
                                        task.steps.forEach((step, stepIndex) => {
                                            const stepNode = {
                                                id: nodeId++,
                                                name: step.name,
                                                type: step.type || "步骤",
                                                description: step.description || "",
                                                x: 0 + stepIndex * 150,
                                                y: -150
                                            };
                                            nodes.push(stepNode);
                                            
                                            // 添加任务到步骤的链接
                                            links.push({
                                                source: taskNode.id,
                                                target: stepNode.id,
                                                type: "包含"
                                            });
                                        });
                                    }
                                });
                            }
                        });
                    }
                });
            }
            
            // 添加业务组件
            if (data.components) {
                data.components.forEach((component, index) => {
                    const componentNode = {
                        id: nodeId++,
                        name: component.name,
                        type: component.type || "业务组件",
                        description: component.description || "",
                        x: 200 + index * 150,
                        y: 150
                    };
                    nodes.push(componentNode);
                    
                    // 添加根节点到业务组件的链接
                    links.push({
                        source: rootNode.id,
                        target: componentNode.id,
                        type: "包含"
                    });
                    
                    // 添加相关任务
                    if (component.relatedTasks) {
                        component.relatedTasks.forEach((taskName, taskIndex) => {
                            // 查找对应的任务节点
                            const taskNode = findTaskNodeByName(taskName);
                            if (taskNode) {
                                // 添加业务组件到任务的链接
                                links.push({
                                    source: componentNode.id,
                                    target: taskNode.id,
                                    type: "关联"
                                });
                            } else {
                                // 如果找不到对应的任务节点，创建一个新的任务节点
                                const newTaskNode = {
                                    id: nodeId++,
                                    name: taskName,
                                    type: "任务",
                                    description: "与业务组件关联的任务",
                                    x: 50 + taskIndex * 180,
                                    y: -50
                                };
                                nodes.push(newTaskNode);
                                
                                // 添加业务组件到新任务节点的链接
                                links.push({
                                    source: componentNode.id,
                                    target: newTaskNode.id,
                                    type: "关联"
                                });
                            }
                        });
                    }
                    
                    // 添加业务对象
                    if (component.businessObjects) {
                        component.businessObjects.forEach((businessObject, boIndex) => {
                            const businessObjectNode = {
                                id: nodeId++,
                                name: businessObject.name,
                                type: businessObject.type || "业务对象",
                                description: businessObject.description || "",
                                x: 600 + boIndex * 180,
                                y: 150
                            };
                            nodes.push(businessObjectNode);
                            
                            // 添加业务组件到业务对象的链接
                            links.push({
                                source: componentNode.id,
                                target: businessObjectNode.id,
                                type: "管理"
                            });
                            
                            // 添加业务实体
                            if (businessObject.businessEntities) {
                                businessObject.businessEntities.forEach((businessEntity, beIndex) => {
                                    const businessEntityNode = {
                                        id: nodeId++,
                                        name: businessEntity.name,
                                        type: businessEntity.type || "业务实体",
                                        description: businessEntity.description || "",
                                        x: 650 + beIndex * 150,
                                        y: 50
                                    };
                                    nodes.push(businessEntityNode);
                                    
                                    // 添加业务对象到业务实体的链接
                                    links.push({
                                        source: businessObjectNode.id,
                                        target: businessEntityNode.id,
                                        type: "包含"
                                    });
                                });
                            }
                        });
                    }
                    
                    // 添加应用
                    if (component.applications) {
                        component.applications.forEach((app, appIndex) => {
                            const appNode = {
                                id: nodeId++,
                                name: app.name,
                                type: app.type || "应用",
                                description: app.description || "",
                                x: 100 + appIndex * 200,
                                y: 50
                            };
                            nodes.push(appNode);
                            
                            // 添加业务组件到应用的链接
                            links.push({
                                source: componentNode.id,
                                target: appNode.id,
                                type: "实现"
                            });
                            
                            // 添加应用组件
                            if (app.components) {
                                app.components.forEach((appComp, compIndex) => {
                                    const appCompNode = {
                                        id: nodeId++,
                                        name: appComp.name,
                                        type: appComp.type || "应用组件",
                                        description: appComp.description || "",
                                        x: 50 + compIndex * 180,
                                        y: -50
                                    };
                                    nodes.push(appCompNode);
                                    
                                    // 添加到应用组件的链接
                                    links.push({
                                        source: appNode.id,
                                        target: appCompNode.id,
                                        type: "包含"
                                    });
                                    
                                    // 添加系统
                                    if (appComp.systems) {
                                        appComp.systems.forEach((system, sysIndex) => {
                                            const systemNode = {
                                                id: nodeId++,
                                                name: system.name,
                                                type: system.type || "系统",
                                                description: system.description || "",
                                                x: -50 + sysIndex * 200,
                                                y: -150
                                            };
                                            nodes.push(systemNode);
                                            
                                            // 添加到系统的链接
                                            links.push({
                                                source: appCompNode.id,
                                                target: systemNode.id,
                                                type: "依赖"
                                            });
                                            
                                            // 添加系统组件
                                            if (system.components) {
                                                system.components.forEach((sysComp, sysCompIndex) => {
                                                    const sysCompNode = {
                                                        id: nodeId++,
                                                        name: sysComp.name,
                                                        type: sysComp.type || "系统组件",
                                                        description: sysComp.description || "",
                                                        x: -100 + sysCompIndex * 180,
                                                        y: -250
                                                    };
                                                    nodes.push(sysCompNode);
                                                    
                                                    // 添加到系统组件的链接
                                                    links.push({
                                                        source: systemNode.id,
                                                        target: sysCompNode.id,
                                                        type: "包含"
                                                    });
                                                });
                                            }
                                        });
                                    }
                                });
                            }
                        });
                    }
                });
            }
            
            // 添加相关领域
            if (data.relatedDomains) {
                data.relatedDomains.forEach((domain, index) => {
                    const domainNode = {
                        id: nodeId++,
                        name: domain,
                        type: "相关业务领域",
                        description: "",
                        x: 600 + index * 150,
                        y: 300
                    };
                    nodes.push(domainNode);
                    
                    links.push({
                        source: rootNode.id,
                        target: domainNode.id,
                        type: "相关"
                    });
                });
            }
            
            // 添加相关组件
            if (data.relatedComponents) {
                data.relatedComponents.forEach((component, index) => {
                    const componentNode = {
                        id: nodeId++,
                        name: component,
                        type: "相关业务组件",
                        description: "",
                        x: 600 + index * 150,
                        y: 450
                    };
                    nodes.push(componentNode);
                    
                    links.push({
                        source: rootNode.id,
                        target: componentNode.id,
                        type: "相关"
                    });
                });
            }
            
            return { nodes, links };
        }
        
        // 根据名称查找任务节点
        function findTaskNodeByName(taskName) {
            for (let i = 0; i < nodes.length; i++) {
                if (nodes[i].name === taskName && nodes[i].type === "任务") {
                    return nodes[i];
                }
            }
            return null;
        }

        // 渲染关系图
        function renderGraph(graphData) {
            // 清除现有内容
            g.selectAll("*").remove();
            
            const width = document.getElementById('graph-container').clientWidth;
            const height = document.getElementById('graph-container').clientHeight;
            
            // 创建力导向图模拟
            simulation = d3.forceSimulation(graphData.nodes)
                .force("link", d3.forceLink(graphData.links).id(d => d.id).distance(100))
                .force("charge", d3.forceManyBody().strength(-500))
                .force("center", d3.forceCenter(width / 2, height / 2))
                .force("collision", d3.forceCollide().radius(60));
            
            // 创建连线
            linkElements = g.append("g")
                .selectAll("line")
                .data(graphData.links)
                .enter()
                .append("line")
                .attr("stroke", "#999")
                .attr("stroke-width", 2)
                .attr("marker-end", "url(#arrowhead)");
            
            // 创建箭头标记
            svg.append("defs").selectAll("marker")
                .data(["arrowhead"])
                .enter().append("marker")
                .attr("id", d => d)
                .attr("viewBox", "0 -5 10 10")
                .attr("refX", 15)
                .attr("refY", -0.5)
                .attr("markerWidth", 6)
                .attr("markerHeight", 6)
                .attr("orient", "auto")
                .append("path")
                .attr("d", "M0,-5L10,0L0,5")
                .attr("fill", "#999");
            
            // 创建节点组
            nodeElements = g.append("g")
                .selectAll("g")
                .data(graphData.nodes)
                .enter()
                .append("g")
                .call(d3.drag()
                    .on("start", dragStarted)
                    .on("drag", dragged)
                    .on("end", dragEnded))
                .on("mouseover", onMouseOver)
                .on("mouseout", onMouseOut);
            
            // 添加节点矩形
            nodeElements.append("rect")
                .attr("width", d => getNodeWidth(d))
                .attr("height", 40)
                .attr("x", d => -getNodeWidth(d)/2)
                .attr("y", -20)
                .attr("rx", 5)
                .attr("ry", 5)
                .style("fill", d => getNodeColor(d.type))
                .style("stroke", "#fff")
                .style("stroke-width", 2);
            
            // 添加节点标题
            nodeElements.append("text")
                .attr("text-anchor", "middle")
                .attr("dy", -5)
                .style("font-size", "12px")
                .style("font-weight", "bold")
                .style("fill", "white")
                .text(d => d.name);
            
            // 添加节点类型
            nodeElements.append("text")
                .attr("text-anchor", "middle")
                .attr("dy", 10)
                .style("font-size", "10px")
                .style("fill", "white")
                .text(d => d.type);
            
            // 更新节点和连线位置
            simulation.on("tick", () => {
                linkElements
                    .attr("x1", d => d.source.x)
                    .attr("y1", d => d.source.y)
                    .attr("x2", d => d.target.x)
                    .attr("y2", d => d.target.y);
                
                nodeElements
                    .attr("transform", d => `translate(${d.x},${d.y})`);
            });
            
            // 拖拽函数
            function dragStarted(event, d) {
                if (!event.active) simulation.alphaTarget(0.3).restart();
                d.fx = d.x;
                d.fy = d.y;
            }
            
            function dragged(event, d) {
                d.fx = event.x;
                d.fy = event.y;
            }
            
            function dragEnded(event, d) {
                if (!event.active) simulation.alphaTarget(0);
                d.fx = null;
                d.fy = null;
            }
            
            // 鼠标悬停事件
            function onMouseOver(event, d) {
                const nodeInfo = document.getElementById('node-info');
                document.getElementById('node-title').textContent = d.name;
                document.getElementById('node-type').textContent = `类型: ${d.type}`;
                document.getElementById('node-description').textContent = d.description || "暂无描述信息";
                
                // 查找关联节点
                const connectedNodes = [];
                graphData.links.forEach(link => {
                    if (link.source.id === d.id) {
                        connectedNodes.push(link.target.name);
                    } else if (link.target.id === d.id) {
                        connectedNodes.push(link.source.name);
                    }
                });
                
                document.getElementById('node-relations').textContent = 
                    connectedNodes.length > 0 ? 
                    `关联: ${connectedNodes.join(', ')}` : 
                    "无直接关联元素";
                
                nodeInfo.style.display = 'block';
            }
            
            // 鼠标离开事件
            function onMouseOut(event, d) {
                document.getElementById('node-info').style.display = 'none';
            }
        }

        // 获取节点颜色
        function getNodeColor(type) {
            switch(type) {
                case '业务元素': return '#2196F3'; // 蓝色
                case '价值流': return '#4CAF50'; // 绿色
                case '活动': return '#8BC34A'; // 浅绿色
                case '任务': return '#CDDC39'; // 黄绿色
                case '步骤': return '#FFEB3B'; // 黄色
                case '业务组件': return '#FF9800'; // 橙色
                case '关联': return '#FF5722'; // 深橙色
                case '业务对象': return '#9C27B0'; // 紫色
                case '业务实体': return '#E91E63'; // 粉色
                case '应用': return '#3F51B5'; // 靛蓝色
                case '应用组件': return '#009688'; // 青色
                case '系统': return '#795548'; // 棕色
                case '系统组件': return '#607D8B'; // 蓝灰色
                case '相关业务领域': return '#F44336'; // 红色
                case '相关业务组件': return '#9E9E9E'; // 灰色
                default: return '#2196F3'; // 默认蓝色
            }
        }

        // 根据节点名称获取节点宽度
        function getNodeWidth(node) {
            const baseWidth = 120;
            const nameLength = node.name.length;
            const typeLength = node.type.length;
            const maxLength = Math.max(nameLength, typeLength);
            return baseWidth + (maxLength - 6) * 8;
        }
        
        // 图例折叠/展开功能
        function initLegendToggle() {
            const legendHeader = document.querySelector('.legend-header');
            const legendItems = document.querySelectorAll('.legend-item');
            const legendToggle = document.querySelector('.legend-toggle');
            let isExpanded = true;
            
            legendHeader.addEventListener('click', function() {
                isExpanded = !isExpanded;
                
                // 切换指示器
                legendToggle.textContent = isExpanded ? '▼' : '▶';
                
                // 显示/隐藏图例项
                legendItems.forEach(item => {
                    item.style.display = isExpanded ? 'flex' : 'none';
                });
            });
        }
        
        // 图例拖拽功能
        function initLegendDrag() {
            const legend = document.querySelector('.legend');
            let isDragging = false;
            let offsetX, offsetY;
            
            // 仅在标题区域允许拖拽
            const legendHeader = document.querySelector('.legend-header');
            
            legendHeader.addEventListener('mousedown', function(e) {
                isDragging = true;
                
                // 计算鼠标相对于图例左上角的偏移量
                const legendRect = legend.getBoundingClientRect();
                offsetX = e.clientX - legendRect.left;
                offsetY = e.clientY - legendRect.top;
                
                // 添加拖动样式
                legend.style.cursor = 'grabbing';
            });
            
            document.addEventListener('mousemove', function(e) {
                if (!isDragging) return;
                
                // 计算新位置（减去偏移量）
                const x = e.clientX - offsetX;
                const y = e.clientY - offsetY;
                
                // 更新图例位置，使用固定定位
                legend.style.position = 'fixed';
                legend.style.left = `${x}px`;
                legend.style.top = `${y}px`;
                legend.style.right = 'auto';
                legend.style.bottom = 'auto';
            });
            
            document.addEventListener('mouseup', function() {
                isDragging = false;
                // 恢复默认样式
                legend.style.cursor = 'default';
            });
        }
        
        // 初始化图例功能
        function initLegend() {
            initLegendToggle();
            initLegendDrag();
        }
        // 存储当前排序状态
        let currentSort = {
            field: null,
            direction: 'asc'
        };
        
        // 存储表格数据
        let tableData = [];
        
        // 初始化表格排序功能
        function initTableSort() {
            const tableHeaders = document.querySelectorAll('#relations-table th.sortable');
            
            tableHeaders.forEach(header => {
                header.addEventListener('click', function() {
                    const field = this.getAttribute('data-sort');
                    
                    // 如果点击的是当前排序字段，切换排序方向
                    if (field === currentSort.field) {
                        currentSort.direction = currentSort.direction === 'asc' ? 'desc' : 'asc';
                    } else {
                        currentSort.field = field;
                        currentSort.direction = 'asc';
                    }
                    
                    // 重置所有表头排序指示器
                    tableHeaders.forEach(h => {
                        h.classList.remove('sort-asc', 'sort-desc');
                    });
                    
                    // 设置当前表头排序指示器
                    this.classList.add(currentSort.direction === 'asc' ? 'sort-asc' : 'sort-desc');
                    
                    // 排序并重新渲染表格
                    sortAndRenderTable();
                });
            });
        }
        
        // 排序并重新渲染表格
        function sortAndRenderTable() {
            if (!tableData || tableData.length === 0) return;
            
            // 根据当前排序字段和方向对数据进行排序
            const sortedData = [...tableData].sort((a, b) => {
                let valueA, valueB;
                
                switch(currentSort.field) {
                    case 'sourceName':
                        valueA = a.sourceNode.name.toLowerCase();
                        valueB = b.sourceNode.name.toLowerCase();
                        break;
                    case 'sourceType':
                        valueA = a.sourceNode.type.toLowerCase();
                        valueB = b.sourceNode.type.toLowerCase();
                        break;
                    case 'relationType':
                        valueA = a.relationType.toLowerCase();
                        valueB = b.relationType.toLowerCase();
                        break;
                    case 'targetName':
                        valueA = a.targetNode.name.toLowerCase();
                        valueB = b.targetNode.name.toLowerCase();
                        break;
                    case 'targetType':
                        valueA = a.targetNode.type.toLowerCase();
                        valueB = b.targetNode.type.toLowerCase();
                        break;
                    default:
                        return 0;
                }
                
                if (valueA < valueB) return currentSort.direction === 'asc' ? -1 : 1;
                if (valueA > valueB) return currentSort.direction === 'asc' ? 1 : -1;
                return 0;
            });
            
            // 清空表格并重新渲染
            const tableBody = document.getElementById('relations-table-body');
            tableBody.innerHTML = '';
            
            sortedData.forEach(item => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${item.sourceNode.name}</td>
                    <td>${item.sourceNode.type}</td>
                    <td>${item.relationType}</td>
                    <td>${item.targetNode.name}</td>
                    <td>${item.targetNode.type}</td>
                `;
                tableBody.appendChild(row);
            });
        }
        
        // 渲染关系表格
        function renderRelationsTable(graphData) {
            // 初始化图例功能（如果尚未初始化）
            if (typeof initLegend === 'function' && !window.legendInitialized) {
                initLegend();
                window.legendInitialized = true;
            }
            
            // 初始化表格排序功能（如果尚未初始化）
            if (!window.tableSortInitialized) {
                initTableSort();
                window.tableSortInitialized = true;
            }
            
            const tableBody = document.getElementById('relations-table-body');
            tableBody.innerHTML = '';
            
            if (!graphData || !graphData.links || graphData.links.length === 0) {
                const emptyRow = document.createElement('tr');
                emptyRow.innerHTML = `<td colspan="5" style="text-align: center; padding: 20px;">暂无关联数据</td>`;
                tableBody.appendChild(emptyRow);
                // 清空表格数据
                tableData = [];
                return;
            }
            
            // 创建节点映射表，用于快速查找节点信息
            const nodeMap = {};
            graphData.nodes.forEach(node => {
                nodeMap[node.id] = node;
            });
            
            // 清空并填充表格数据数组
            tableData = [];
            
            // 遍历所有链接，创建表格数据
            graphData.links.forEach(link => {
                // 获取源节点和目标节点，处理可能的节点对象或ID
                const sourceId = typeof link.source === 'object' ? link.source.id : link.source;
                const targetId = typeof link.target === 'object' ? link.target.id : link.target;
                
                const sourceNode = nodeMap[sourceId];
                const targetNode = nodeMap[targetId];
                
                if (sourceNode && targetNode) {
                    // 将英文关系类型映射为中文
                    let relationType = link.type;
                    const relationTypeMap = {
                        'contains': '包含',
                        'implements': '实现',
                        'related': '相关',
                        'manages': '管理',
                        'uses': '使用',
                        '依赖': '依赖'
                    };
                    
                    if (relationTypeMap[relationType.toLowerCase()]) {
                        relationType = relationTypeMap[relationType.toLowerCase()];
                    }
                    
                    // 将数据添加到表格数据数组
                    tableData.push({
                        sourceNode: sourceNode,
                        targetNode: targetNode,
                        relationType: relationType
                    });
                }
            });
            
            // 如果有排序字段，进行排序后渲染；否则直接渲染
            if (currentSort.field) {
                // 添加排序指示器到当前排序字段
                const tableHeaders = document.querySelectorAll('#relations-table th.sortable');
                tableHeaders.forEach(header => {
                    if (header.getAttribute('data-sort') === currentSort.field) {
                        header.classList.add(currentSort.direction === 'asc' ? 'sort-asc' : 'sort-desc');
                    }
                });
                sortAndRenderTable();
            } else {
                // 没有排序字段，直接渲染原始数据
                tableData.forEach(item => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${item.sourceNode.name}</td>
                        <td>${item.sourceNode.type}</td>
                        <td>${item.relationType}</td>
                        <td>${item.targetNode.name}</td>
                        <td>${item.targetNode.type}</td>
                    `;
                    tableBody.appendChild(row);
                });
            }
        }
    </script>
</body>
</html>